<template>
	<view class="today">
		<view class="inner-cont" v-for="(toda,index) in testbar " :key="index">
			<!-- 背景 -->
			<view class="inner-back" @click="golead(index)">
				<image src="https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/f88acb0e-7a31-40d6-902f-1e462e9022feimage/png"></image>
				<view class="img-bottom">
					<view>
						<image src="../static/image/火苗.png"></image>
					</view>

					<view>
						<text>{{toda.name}}</text>
					</view>
				</view>
			</view>
			<!-- 下方简介 -->
			<view class="inner-bottom">
				<text>
					{{toda.standard.slice(0,10)+'...'}}
					({{toda.scoring_criteria}})
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TodayComend",
		data() {
			return {
				todata: this.$props.ToData,
				testbar:{},
			};
		},
		props: ['ToData'],
		mounted() {
			this.getTestbar();
		},
		methods: {
			golead(index) {
				uni.navigateTo({
					url: '/pages/TestLead/TestLead?index='+index
				})
			},
			async getTestbar(){
				let res = await this.$store.dispatch("getTestBar");
				// console.log(res);
				if(res=="ok"){
					this.testbar = this.$store.state.test.testbar;
					console.log("this.testbar",this.testbar);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.today {
		width: 750rpx;
		height: 270rpx;
		// background-color: antiquewhite;
		display: flex;
		justify-content: space-around;

		.inner-cont {
			width: 200rpx;
			height: 100%;
			margin-top: 20rpx;

			// background-color: antiquewhite;

			.inner-back {
				width: 100%;
				height: 70%;
				// background-color: aqua;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}

				.img-bottom {
					position: absolute;
					bottom: 1rpx;
					font-size: 20rpx;
					color: #ffffff;
					display: flex;
					align-items: center;

					view {
						&:first-child {
							width: 50rpx;
							height: 60rpx;
						}

						image {
							width: 40rpx;
							height: 40rpx;

						}

						&:last-child {
							width: 200rpx;
							height: 40rpx;
						}
					}


				}
			}
			// 
			.inner-bottom {
				padding-top: 20rpx;
				width: 160rpx;
				margin-left: 20rpx;
				height: 50rpx;	
				font-size: 24rpx;
				// background-color: antiquewhite;
			}
		}

		// 
	}
</style>
